<template>
  <view class="action_options_box" @click="emit('onClick')">
    <view class="leftText">
      {{ props.leftText }}
    </view>

    <view class="content">
      <view class="rightText" :style="{ color: props.rightColor }">
        {{ props.rightText }}</view
      >
      <uni-icons
        v-if="isIcon"
        class="icon"
        type="right"
        size="18"
        color="rgba(116, 111, 111, 0.54)"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
//接受父组件参数
const props = defineProps({
  /**
   * 左侧文字
   */
  leftText: {
    type: String,
    default: '',
  },
  /**
   * 右侧文字文字
   */
  rightText: {
    type: String,
    default: '查看',
  },
  /**
   * 右侧文字文字颜色
   */
  rightColor: {
    type: String,
    default: 'black',
  },
  /**
   * 是否显示右侧箭头
   */
  isIcon: {
    type: Boolean,
    default: true,
  },
})

//自定义事件
const emit = defineEmits<{
  //点击事件
  (e: 'onClick'): void
}>()
</script>

<style scoped lang="scss">
.action_options_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 28rpx;
  padding: 26rpx 0;
  width: 100%;
  color: rgb(35, 34, 34);

  .leftText {
    max-width: calc(40% - 30rpx);
    padding-right: 30rpx;
  }

  .rightText {
    padding-right: 5rpx;
    font-size: 26rpx;
  }

  .content {
    max-width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
      transform: translateY(2rpx);
    }
  }
}
</style>
